* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    body {
    background-color: #f5f7fa;
    color: #333;
    line-height: 1.6;
    }
    header {
        margin-bottom: 30px;
        }
        /* 等待阅读列表 */
        #book-list {
        background: white;
        border-radius: 10px;
        padding: 30px;
        margin-bottom: 30px;
        box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
        }
        /* 添加新书籍表单 */
        #add-book {
        background: white;
        border-radius: 10px;
        padding: 30px;
        margin-bottom: 30px;
        box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
        }
        /* 页脚 */
        footer {
        background: white;
        border-radius: 10px;
        padding: 30px;
        box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
        }
    #wrapper {
        max-width: 1000px;
        margin: 0 auto;
        padding: 20px;
        }
        #page-banner {
            background: linear-gradient(135deg, #4a6fa5 0%, #166bb3 100%);
            color: white;
            padding: 40px 20px;
            border-radius: 10px;
            text-align: center;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            }
            /* 头部 标题样式 */
            #page-banner h1.title {
            font-size: 2.5rem;
            letter-spacing: 1px;
            margin-bottom: 10px;
            }
            /* 头部 段落样式 */
            #page-banner p {
            font-size: 1.1rem;
            opacity: 0.9;
            margin-bottom: 20px;
            }
            /* 搜索框样式 */
            #search-books input {
            width: 80%;
            max-width: 500px;
            padding: 12px 15px;
            border: none;
            border-radius: 30px;
            font-size: 1rem;
            outline: none;
            transition: all 0.3s ease;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            }
            /* 搜索框样式 聚焦效果 */
            #search-books input:focus {
            width: 85%;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            }
            #book-list h2.title {
                color: #4a6fa5;
                font-size: 1.8rem;
                margin-bottom: 20px;
                padding-bottom: 10px;
                border-bottom: 2px solid #f0f4f8;
                }
                /* 无序列表容器 */
                #book-list ul {
                list-style: none;
                }
                /* 单本书 */
                #book-list li {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 12px 15px;
                margin-bottom: 10px;
                background: #f9fafc;
                border-radius: 6px;
                transition: all 0.2s ease;
                }
                /* 书名 */
                .name {
                font-size: 1.1rem;
                color: #333;
                }
                /* 删除按钮 */
                .delete {
                color: #e74c3c;
                background: transparent;
                border: none;
                padding: 5px 10px;
                cursor: pointer;
                font-weight: 600;
                border-radius: 4px;
                transition: all 0.2s ease;
                }
                #book-list li:hover {
                    background: #f0f4f8;
                    transform: translateX(5px);
                    }
                    /* 删除按钮 鼠标悬浮效果 */
                    .delete:hover {
                    background: #e74c3c;
                    color: white;
                    }
                    #add-book input[type="checkbox"] {
                        width: 18px;
                        height: 18px;
                        accent-color: #4a6fa5;
                        }
                        /* 隐藏书籍单选框 文字内容 */
                        #add-book label[for="hide"] {
                        cursor: pointer;
                        color: #666;
                        }
                        /* 添加书籍输入框 */
                        #add-book input[type="text"] {
                        flex: 1;
                        min-width: 200px;
                        padding: 12px 15px;
                        border: 2px solid #e1e8ed;
                        border-radius: 6px;
                        font-size: 1rem;
                        transition: all 0.3s ease;
                        }
                        /* 添加书籍输入框 聚焦效果 */
                        #add-book input[type="text"]:focus {
                        border-color: #4a6fa5;
                        outline: none;
                        box-shadow: 0 0 0 3px rgba(74, 111, 165, 0.1);
                        }
                        /* 添加书籍 确认按钮 */
                        #add-book button {
                        background: #4a6fa5;
                        color: white;
                        border: none;
                        padding: 12px 25px;
                        border-radius: 6px;
                        font-size: 1rem;
                        cursor: pointer;
                        transition: all 0.3s ease;
                        }
                        /* 添加书籍 确认按钮鼠标悬停效果 */
                        #add-book button:hover {
                        background: #3a5d8c;
                        transform: translateY(-2px);
                        }
                        效果：
                        为了使输入框占满剩余的宽度，这里使用 flex 布局。找到 #add-book 选择器，添加 flex 布局属性。
                        /* 添加新书籍表单 */
                        #add-book {
                        display: flex;
                        /* flex 布局 */
                        flex-wrap: wrap;
                        /* 换行 */
                        gap: 15px;
                        /* 15px 间距 */
                        align-items: center;
                        /* 垂直居中效果 */
                        background: white;
                        border-radius: 10px;
                        padding: 30px;
                        margin-bottom: 30px;
                        box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
                        }
                        #add-book {
                            display: flex;
                            /* flex 布局 */
                            flex-wrap: wrap;
                            /* 换行 */
                            gap: 15px;
                            /* 15px 间距 */
                            align-items: center;
                            /* 垂直居中效果 */
                            background: white;
                            border-radius: 10px;
                            padding: 30px;
                            margin-bottom: 30px;
                            box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
                            }
                            .tab-buttons {
                                display: flex;
                                list-style: none;
                                margin-bottom: 20px;
                                border-bottom: 2px solid #f0f4f8;
                            }
                            
                            /* 选项卡的子项*/
                            .tab-buttons li {
                                padding: 10px 20px;
                                margin-right: 5px;
                                cursor: pointer;
                                border-radius: 6px 6px 0 0;
                                /* transition: all 0.3s ease; */
                                font-weight: 600;
                                color: #666;
                            }
                            
                            /* 选项卡的子项，加上 active 时的效果*/
                            .tab-buttons li.active {
                                background: #4a6fa5;
                                color: white;
                            }
                            
                            /* 文字容器，默认隐藏效果 */
                            .tab-content {
                                display: none;
                                padding: 10px 0;
                            }
                            
                            /* 文字容器，加上 active class 时，显示 */
                            .tab-content.active {
                                display: block;
                                /* animation: fadeIn 0.5s ease; */
                            }
                            
                            .tab-content p {
                                margin-bottom: 15px;
                                color: #555;
                                line-height: 1.8;
                            }
                            